<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 告诉浏览器此页面是响应式的 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            box-sizing: border-box;
            /* 基础字号根据视口大小适当缩放 */
            font-size: calc(1vw + 0.6em);
        }

        @media (min-width: 50em) {
            :root {
                font-size: 1.125em;
            }
        }

        *::before,
        *::after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        a:link {
            color: #1476b8;
            font-weight: bold;
            text-decoration: none;
        }

        a:visited {
            color: #1430b8;
        }

        a:hover {
            text-decoration: underline;
        }

        a:active {
            color: #b81414;
        }

        .page-header {
            padding: .4em 1em;
            background-color: #fff;
        }

        @media (min-width: 35em) {
            .page-header {
                padding: 1em;
            }
        }

        @media (min-width: 50em) {
            .page-header {
                padding: 1em 4em;
            }
        }

        .title > h1 {
            color: #333;
            text-transform: uppercase;
            font-size: 1.5em;
            margin: .2em 0;
        }

        .slogan {
            color: #888;
            font-size: .875em;
            margin: 0;
        }

        .hero {
            padding: 2em 1em;
            text-align: center;
            background-image: url(https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500);
            background-size: 100%;
            color: #fff;
            /* 深色的文字投影保证浅色的文字在背景中可读 */
            text-shadow: .1em .1em .3em #000;
        }

        @media (min-width: 35em){
            .hero {
                padding: 5em 3em;
                font-size: 1.2rem;
            }
        }

        @media (min-width: 50em) {
            .hero {
                padding: 7em 6em;
            }


        }

        main {
            padding: 1em;
        }

        @media (min-width: 35em) {
            main {
                padding: 2em 1em;
            }
        }

        @media (min-width: 50em) {
            main {
                padding: 2em 4em;
            }
        }

        .subtitle {
            margin-top: 1.5em;
            margin-bottom: 1.5em;
            font-size: .875rem;
            text-transform: uppercase;
        }

        /* 将菜单提到header右侧,并使用汉堡包图标来隐藏菜单 */
        /* 给绝对定位的子元素创建包含块 */
        .menu {
            position: relative;
        }

        .menu-toggle {
            position: absolute;
            /* 负的top值将元素拉到包含块的上方 */
            top: -1.2em;
            right: .1em;

            /* 覆盖原生按钮样式 */
            border: 0;
            background-color: transparent;

            /* 按钮大小固定为1em */
            font-size: 3em;
            width: 1em;
            height: 1em;
            line-height: .4;
            /* 隐藏文本内容 */
            text-indent: 5em;
            white-space: nowrap;
            overflow: hidden;
        }

        /* 使用after伪类插入内容 */
        .menu-toggle::after {
            position: absolute;
            top: .2em;
            left: .2em;
            display: block;
            /* 使用汉堡包字符图标覆盖原始内容 */
            content: "\2261";
            text-indent: 0;
        }

        /* 隐藏现有菜单 */
        .menu-dropdown {
            display: none;
            position: absolute;
            right: 0;
            left: 0;
            margin: 0;
        }

        /* 当menu添加了is-open class之后,显示 */
        .menu.is-open .menu-dropdown {
            display: block;
        }

        .nav-menu {
            margin: 0;
            padding-left: 0;
            border:1px solid #ccc;
            list-style: none;
            background-color: #000;
            color: #fff;
        }

        .nav-menu > li + li {
            border-top: 1px solid #ccc;
        }

        .nav-menu > li > a {
            display: block;
            /* 使用足够大的内边距,保证可点击区域 */
            padding: .8em 1em;
            color: #fff;
            font-weight: normal;
        }

        @media (min-width: 35em) {
            /* 隐藏汉堡包按钮 */
            .menu-toggle {
                display: none;
            }

            /* 显示下拉菜单,覆盖绝对定位 */
            .menu-dropdown {
                display: block;
                position: static;
            }

            /* 将菜单改为弹性盒子 */
            .nav-menu {
                display: flex;
                border: 0;
                padding: 0 1em;
            }

            .nav-menu > li {
                flex: 1;
            }

            .nav-menu > li + li {
                border: 0;
            }

            .nav-menu > li > a {
                padding: .3em;
                text-align: center;
            }

            /* 设置主体的三列布局 */
            .row {
                display: flex;
                /* 使用负的外边距扩大容器,补偿列的外边距 */
                margin-left: -0.75em;
                margin-right: -0.75em;
            }

            .column {
                flex: 1;
                /* 添加列间距 */
                margin-right: .75em;
                margin-left: .75em;
            }
        }

        @media (min-width: 50em) {
            .nav-menu {
                padding: 0 4em;
            }
        }

    </style>
</head>
<body>
    <header id="header" class="page-header">
        <div class="title">
            <h1>WomBat Coffee Roasters</h1>
            <div class="slogan">We love Coffee</div>
        </div>
    </header>

    <nav class="menu" id="main-menu">
        <!-- 移动版菜单添加汉堡包标签 -->
        <button class="menu-toggle" id="toggle-menu">
            toggle menu
        </button>
        <!-- 移动设备上主菜单进行隐藏 -->
        <div class="menu-dropdown">
            <ul class="nav-menu">
                <li><a href="/about.html">About</a></li>
                <li><a href="/shop.html">Shop</a></li>
                <li><a href="/menu.html">Menu</a></li>
                <li><a href="/brew.html">Brew</a></li>
            </ul>
        </div>
    </nav>

    <aside id="hero" class="hero">
        您想在 2022 年 开始写博客 或开展新的在线业务吗？如果这样做，则需要注册一个域名。
建立网站的第一步是找到一个好的域名并注册。在本文中，我们将逐步向您展示如何注册域名。我们还将分享有关如何免费注册域名的提示。 展开
    </aside>

    <main class="" id="main">
        <div class="row">
            <section class="column">
                <h2 class="subtitle">Single-origin</h2>
                <p>
                    公司拟向特定对象发行股票募集资金总额不超过20亿元，全部投向收购TD TECH HOLDING LIMITED（以下简称TD TECH）51%股权，交易对象为Nokia Solutions and Networks GmbH&Co.KG（以下简称诺基亚）。
                </p>
            </section>
            <section class="column">
                <h2 class="subtitle">Blends</h2>
                <p>
                    公开资料显示，TD TECH公司注册于中国香港，成立于2003年，诺基亚和华为分别持有51%、49%股权。TD TECH公司董事中，徐直军、何海鹏、闫力大等人均为华为高管，徐直军还是华为轮值董事长之一。同时，TD TECH为控股型公司，全资子公司鼎桥通信技术有限公司（以下简称鼎桥通信）、全资孙公司成都鼎桥通信技术有限公司（以下简称成都鼎桥）为业务主要经营主体
                </p>
            </section>
            <section class="column">
                <h2 class="subtitle">Brewing Equipment</h2>
                <p>
                    据悉，鼎桥通信、成都鼎桥是行业客户通信联接解决方案提供商，主要从事与无线通信、终端产品、物联网相关的技术和产品的研发、销售及相关服务，产品广泛应用于能源、交通、安防、电力、汽车、工业等领域。而东方材料主要从事软包装用油墨、复合用聚氨酯胶粘剂以及PCB电子油墨等产品的生产销售。
                </p>
            </section>
        </div>
    </main>

    <script type="text/javascript">
        (function(){
            var buttons = document.getElementById('toggle-menu');
            buttons.addEventListener('click', function(e) {
                e.preventDefault();
                var menu = document.getElementById('main-menu');
                menu.classList.toggle('is-open');
            });
        })();
    </script>
</body>
</html>